<template>
  <el-form
    ref="formInline"
    :inline="true"
    :model="formInline"
    class="el-form--inline qualificationForm">
    <el-form-item
      label="邀请方"
      prop="inviter">
      <el-input
        v-model="formInline.inviter"
        placeholder="请输入邀请方"/>
    </el-form-item>
    <el-form-item
      label="受邀方"
      prop="invited">
      <el-input
        v-model="formInline.invited"
        placeholder="请输入受邀方"/>
    </el-form-item>
    <el-form-item
      label="单据状态"
      prop="documentStatus">
      <el-select
        v-model="formInline.documentStatus"
        placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item
      label="单据编号"
      prop="documentCode">
      <el-input
        v-model="formInline.documentCode"
        placeholder="请输入单据编号"/>
    </el-form-item>
    <el-form-item
      label="负责人"
      prop="user">
      <el-input
        v-model="formInline.user"
        placeholder="请输入负责人"/>
    </el-form-item>
    <el-form-item
      label="产品线"
      prop="line">
      <el-input
        v-model="formInline.line"
        placeholder="请输入产品线"/>
    </el-form-item>
    <el-form-item
      label="创建时间"
      class="qualificationDataPicker"
      prop="startTime">
      <el-date-picker
        v-model="formInline.startTime"
        type="date"
        placeholder="开始日期"/>
    </el-form-item>
    ~
    <el-form-item
      class="qualificationDataPicker"
      prop="endTime">
      <el-date-picker
        v-model="formInline.endTime"
        type="date"
        placeholder="结束日期"/>
    </el-form-item>
    <el-form-item class="searchButtonList">
      <el-button
        class="submit"
        @click="search">查询</el-button>
      <el-button
        class="reset"
        @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'SearchForm',
  data () {
    return {
      formInline: {
        inviter: '',
        invited: '',
        documentStatus: '',
        documentCode: '',
        user: '',
        line: '',
        startTime: '',
        endTime: ''
      },
      options: [{
        value: '草稿',
        label: '草稿'
      }, {
        value: '受邀方处理',
        label: '受邀方处理'
      }, {
        value: '邀请方处理',
        label: '邀请方处理'
      }, {
        value: '已终止',
        label: '已终止'
      }, {
        value: '完成',
        label: '完成'
      }],
      value: ''
    }
  },
  methods: {
    search () {
      this.$emit('search')
    },
    reset () {
      this.$refs['formInline'].resetFields()
    }
  }
}
</script>

<style lang="less">

</style>
<style scoped>
    .searchButtonList button {
      width: 74px;
      height: 34px;
      cursor: pointer;
      margin-left: 10px;
    }

    .submit {
      background: rgba(35, 113, 197, 1);
      border: 0;
      color: #fff;
    }

    .reset {
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(221, 223, 225, 1);
    }
</style>
